{% extends 'bootbase.html' %}
{% load staticfiles %}
{% load l10n %}
{% block title %}Grondwatermeetnet {{object.name}} {% endblock title %}
{% block breadcrumbs %}{% endblock %}
{% block extrastyle %}
<style type="text/css">
	.labels {
		color: black;
		background-color: #FFFF66;
		font-family: "Lucida Grande", "Arial", sans-serif;
		font-size: 10px;
		font-weight: bold;
		text-align: center;
		width: 54px;     
		border: none;
		white-space: nowrap;
/* 		text-shadow: 0px 0px 12px red; */
	}
 </style>
{% endblock %}
{% block brandname %}<div class="navbar-brand"><img style="margin-top: -7px;max-width: 100px;" src="/media/{{object.logo}}"/> Grondwatermeetnet {{object.name}}</div>{% endblock %}
{% block script %}
{{ block.super }}
{% localize off %}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="{% static "js/markerwithlabel.js" %}"></script>
<script>
var map;
var markers;
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.{{maptype}}
    });
	var json = {{content|safe}};
	var bounds = new google.maps.LatLngBounds();
	var infowindow = new google.maps.InfoWindow();
	var marker;
	markers = new Array();
	json.forEach(function(loc) {
			marker = new MarkerWithLabel({
			icon: {
			      path: google.maps.SymbolPath.CIRCLE,
			      scale: 6,
			      fillColor: 'red',
			      fillOpacity: 0.8,
			      strokeColor: 'white',
			      strokeWeight: 2
			},
   			position: new google.maps.LatLng(loc.lat,loc.lon),
			title: loc.name, 
   			map: map,
   			labelContent: loc.name,
   	        labelAnchor: new google.maps.Point(27, -10),
   	        labelClass: 'labels',
   	        labelStyle: {'opacity': 0.8},
   	        labelInBackground: true   			
   		});
   		markers.push(marker);
   		google.maps.event.addListener(marker, 'click', (function(marker) {
	        return function() {
	          infowindow.setContent(loc.info);
	          infowindow.open(map, marker);
	        }
	      })(marker));
		bounds.extend(marker.position);
	});
	map.fitBounds(bounds);
}
$(function(){initialize();});

function showMarker(m) {
	markers[m].setAnimation(google.maps.Animation.BOUNCE);	
}
function hideMarker(m) {
	markers[m].setAnimation(null);	
}

</script>
{% endlocalize %}
{% endblock %}
{% block content %}
<div class = "container-fluid">
<!--<div class = "row-fluid">
<div class = "col-md-12"><h3>Meetnet {{object.name}}</h3>{{object.description|safe}}</div>
</div>
-->
<div class = "row-fluid">
<div class = "col-md-10"><div id= map style="width:100%;height:700px;"></div></div>
<div class = "col-md-2">
<div class = "list-group">
<a href="#" class="list-group-item active">Putten<span class="badge">{{object.well_set.count}}</a>
{% for well in object.well_set.all %}
<a onmouseover="showMarker({{forloop.counter0}});" onmouseout="hideMarker({{forloop.counter0}});" href="{% url 'well-detail' well.id %}" class="list-group-item">{{well.name}}
{% if well.straat %}<br/><div class='text-muted'><small>{{well.straat}}, {{well.plaats}}</small></div>{% endif %}</a>
{% endfor %}
</div>
</div>
</div>
{% endblock content %}
